<template>
  <div class="course-exam-paper">
    <div class="course-exam-paper__question-list">
      <div class="course-exam-paper__question-item" v-for="(q, index) in questions" :key="q.id">
        <component
          v-if="q.question_type"
          :question-index="index + 1"
          :is="questionComponents[q.question_type]"
          :question="q"
        ></component>
        <template v-else>
          <div>题目渲染出错</div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { type Component } from 'vue';
import Choice from '@/components/Question/Choice.vue';
import Judgement from '@/components/Question/Judgement.vue';
import ShortAnswer from '@/components/Question/ShortAnswer.vue';
import CaseAnalysis from '@/components/Question/CaseAnalysis.vue';
import Comment from '@/components/Comment/index.vue';
import type { ICourseQuestions } from '@/interface/course';

interface IProps {
  // TODO: 数据结构
  questions?: ICourseQuestions[];
}
const props = withDefaults(defineProps<IProps>(), {
  questions: () => [],
});

const questionComponents: Record<string, Component> = {
  '1': Choice,
  '2': Choice,
  '3': Judgement,
  '4': ShortAnswer,
  '5': CaseAnalysis,
};
</script>

<style lang="less" scoped>
.course-exam-paper {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #0205140f;

  &__question-item {
    & + & {
      margin-top: 16px;
    }
  }
}
</style>
